<style lang="less" module>
.editGroup_itemEidtor {
  // height: 100%;
  padding: 10px;
  border: 1px solid gray;
  // overflow: hidden;
}
.editGroup_itemEidtor:hover {
  /* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); */
  /*border-color: #eee;*/
  box-shadow: none;
  border-style: dashed;
  border-color: #ced0d3;
}
.editGroup_itemSelect {
  /*box-shadow: 0 1px 6px rgba(0,0,0,0.2);*/
  // box-shadow: none;
  // transform: scale(.99);
  border: 1px solid var(--primary-color);
}
.editGroup_itemSelect:hover {
  border-style: solid;
  border-color: var(--primary-color);
}
</style>
<template>
  <component
    :is="property.tag"
    :id="property.id"
    :currentModuleId="currentModuleId"
    :comObject="property.classObject"
    :class="[
      $style.editGroup_itemEidtor,
      property.id === compGroup.currentId
        ? $style.editGroup_itemSelect
        : '',
    ]"
    :key="property.id"
    :data-tag="property.tag"
    :slot="property.slot"
    @contextmenu.native.prevent.stop="operation"
    @click.native.stop="selectMe"
  >
    <jCtGroup
      v-for="item in compGroup.compGroupRuntime.getChildrenLevel(property.id)"
      :key="item.id"
      :property="item"
      :currentModuleId="currentModuleId"
      :slot="item.slot"
    ></jCtGroup>
  </component>
</template>

<script>
import storeVar from "../mixins/storeVar";

export default {
  name: "jCtGroup",
  mixins: [storeVar],
  data() {
    return {};
  },
  props: {
    property: {
      default: () => {
        return {};
      },
    },
    currentModuleId: {
      default() {
        return 0
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {
    selectMe() {
      this.setElement(this.property.id);
    },
    operation(e) {
      this.editContextMenu({ e, id: this.property.id });
    },
  },
};
</script>
